<template>
  <div class="echart" id="chart-bar" ref="chartBar"></div>
</template>
<script lang="ts">
import { defineComponent, onMounted, reactive, toRefs, onUnmounted, nextTick, ref, watch } from "vue";
import * as echarts from "echarts/core";
import {
  TooltipComponent,
  GridComponent,
  LegendComponent,
  MarkLineComponent,
} from "echarts/components";
import { BarChart } from "echarts/charts";
import { CanvasRenderer } from "echarts/renderers";

echarts.use([
  TooltipComponent,
  GridComponent,
  LegendComponent,
  MarkLineComponent,
  BarChart,
  CanvasRenderer,
]);
export default defineComponent({
  props: {
    members: Array,
    taskNum: Array,
    defectNum: Array
  },
  setup(props) {
    const state = reactive({
      members: props.members,
      taskNum: props.taskNum,
      defectNum: props.defectNum,
      mychart: null
    })
    const chartBar = ref(null);
    let mychart:any = null;

    onMounted(()=>{
      mychart && mychart.dispose();
      mychart = echarts.init(chartBar.value);
      renderChart();
      window.addEventListener('resize', ()=>{
        mychart.resize();
      })
    })

    watch(()=>props.members, (val)=>{
      state.members = val;
      renderChart();
    })
    watch(()=>props.taskNum, (val)=>{
      state.taskNum = val;
      renderChart();
    })

    const renderChart = ()=> {
      mychart.setOption({
        title: {
          text: "成员贡献度",
          textStyle: {
            fontSize: 16,
            fontWeight: 'normal'
          },
          padding: [20,16,16,16]
        },
        color: ['#7ED321','#FF5257'],
        tooltip: {
          trigger: "axis",
          axisPointer: {
            // 坐标轴指示器，坐标轴触发有效
            type: "none", // 默认为直线，可选为：'line' | 'shadow'
          },
          formatter: function(params) {
            let str = '';
            params.forEach((item, idx) => {
              str += `${item.marker}${item.seriesName}: ${item.data}`
              str += idx === params.length -1? '': '<br/>'
            })
            return str
          }
        },
        legend: {
          top: "12%",
          left: "right",
          padding: [0,35,10,10],
          itemWidth: 16,
          itemHeight: 16,
          icon: 'rect',
          textStyle: {
            color: '#666',
            fontSize: 14,
          }
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "12%",
          top: '20%',
          containLabel: true,
        },
        xAxis: [
          {
            type: "category",
            axisTick: {
              show: false
            },
            axisLine: {
              lineStyle: {
                color: '#E9E9E9'
              }
            },
            axisLabel:{ interval: 0, margin: 16, color: 'rgba(0,0,0,0.65)' },
            // data: ["赵一", "钱二", "孙三", "李四", "周五", "吴六", "郑七", "王八","冯九", "陈十"],
            data: state.members
          },
        ],
        yAxis: {
          type: 'value',
          min: 0,
          // @ts-ignore
          max: state.members?.length?null:20,
          minInterval: 1,
          axisLine: {
          show: false
          },
          // 辅助切割线
          splitLine: {
            lineStyle: {
              type: 'dashed'
            }
          },
          // 坐标标签
          axisLabel:{ margin: 16, color: 'rgba(0,0,0,0.65)' }
        },
        series: [ 
          {
            name: "任务数",
            type: "bar",
            stack: "one",
            barWidth : 30,
            emphasis: {
              // 配置是否当前数据+聚焦淡出其他系列数据
              focus: "none",
            },
            // data: [34, 56, 78, 25, 39, 81, 77, 42, 69, 63],
            data: state.taskNum
          },
          {
            name: "缺陷数",
            type: "bar",
            stack: "one",
            barWidth : 30,
            emphasis: {
              focus: "none",
            },
            // data: [22, 18, 19, 23, 20, 33, 31, 12, 9, 4],
            data: state.defectNum
          },
        ],
      });
    }
    onUnmounted(() => {
      window.removeEventListener('resize',()=>{
        return false;
      })
    })

    return {
      ...toRefs(state),
      chartBar
    }
  },
});
</script>
<style lang="scss" scoped>
.echart {
  width: 100%;
  height: 100%;
}
</style>